<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鲜花</title>
    <style>
        body{
            background-color: #ef817d;
            text-align: center;
        }
        canvas{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <canvas id="flower" width="1024" height="520"></canvas>

    <script>

        // 设置图像元素
        var bg = new Image();
        bg.src = "img/bg.png";
        var flower = new Image();
        flower.src = "img/flower.png";

        var person = new Image();
        person.src = "img/Snip1.png";

        var yes = new Image();
        yes.src = "img/Snip2.png";
        var no = new Image();
        no.src = "img/Snip3.png";

        var ansYes = new Image();
        ansYes.src = "img/Snip4.png";
        var ansNo = new Image();
        ansNo.src = "img/Snip5.png";

        // 画布图像
        var canvas = document.getElementById("flower");
        var ctx = canvas.getContext("2d");

        var btnY = new Btn(328, 280, yes, ansYes, 0.6);
        var btnN = new Btn(780, 290, no, ansNo, 2.5);

        // 绘制背景
//        bg.onload = function () {
//            ctx.drawImage(bg,0,0);
//        }
//
//        // 绘制鲜花
//        flower.onload = function () {
//            var flowerX = Math.floor(Math.random() * (1024-flower.naturalWidth));
//            var flowerY = Math.floor(Math.random() * (520-flower.naturalHeight));
//
//            var scale = Math.floor(Math.random() * 70 + 30)/100;    // 0.3~1.0
//
//            ctx.save();
//            ctx.scale(scale, scale);
//            ctx.drawImage(flower,flowerX,flowerY);
//            ctx.restore();
//        }


        function DrawMyFlower() {
            this.flowerX = Math.floor(Math.random() * (1024-flower.naturalWidth));
            this.flowerY = Math.floor(Math.random() * (520-flower.naturalHeight));

            this.scale = Math.floor(Math.random() * 70 + 30)/100;    // 0.3~1.0

            this.step =  Math.floor(Math.random() * 5 + 1);    // 1~5

            // 绘制核心代码
            this.paint = function () {
                this.flowerY += this.step;

                ctx.save();
                ctx.scale(this.scale, this.scale);
                ctx.drawImage(flower,this.flowerX,this.flowerY);
                ctx.restore();

                if(this.flowerY >= 520){
                    this.flowerY = 0;
                    this.flowerX = Math.floor(Math.random() * (1024-flower.naturalWidth));
                }
            }
        }

        var arr = [];
        for(i=0;i<99;i++){
            arr[i] = new DrawMyFlower();
        }

        var f = new DrawMyFlower();
        setInterval(function () {
            ctx.drawImage(bg,0,0);



            // 绘制一朵
//            f.paint();

            // 绘制99朵
            for(i=0;i<arr.length;i++){
                arr[i].paint();
            }

            ctx.drawImage(person, 0 ,0);
            btnY.paint();
            btnN.paint();

        },40);

        function Btn(x,y,img,say,arc) {
            this.x = x;
            this.y = y;
            this.say = say;
            this.paint = function () {
                ctx.save();
                ctx.translate(this.x, this.y);
                ctx.rotate(arc);
                ctx.drawImage(img, -img.naturalWidth/2+10, -img.naturalHeight/2);
                ctx.restore();
                ctx.drawImage(this.say, this.x-this.say.naturalWidth/2,  this.y-this.say.naturalHeight/2);
            };
        }
    </script>
</body>
</html>